<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>Mua~亲亲宠————下单</title>
<link rel="stylesheet" href="css/style.css" />

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrapValidator.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrapValidator.js"></script>


</head>
<body>
	<%@ include file="/WEB-INF/jsp/top.jspf"%>
	<div class="title"></div>
	<div class="container  col-sm-offset-2  col-sm-8">
		<div>
			<div class='thumbnail'>
				<img style='height: 200px;width: 180px' src="${pet.icon}"
					class='img-responsive' onerror="this.src='images/pet_icon.jpg'">
				<div class='caption'>
					<h4>${pet.title}</h4>
					<p>价格：￥${pet.price}</p>
				</div>
			</div>
		</div>
		<div class="panel panel-info">
			<div class="panel-heading">
				<h3 class="panel-title">填写地址信息</h3>
			</div>
			<div class="panel-body">
				<div class="col-sm-offset-1  col-sm-9 column">
					<form id="orderForm" class="form-horizontal">
						<input type="hidden" id="petId" name="petId" value="${pet.id}">
						<div class="form-group">
							<label class="col-sm-3 control-label">收件人：</label>
							<div class="col-sm-9">
								<input type="text" name="consignee" class="form-control" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">联系电话：</label>
							<div class="col-sm-9">
								<input type="text" name="tel" class="form-control" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">详细地址：</label>
							<div class="col-sm-9">
								<div class="textarea">
									<textarea class="form-control" rows="5" name="address"></textarea>
								</div>
							</div>
						</div>
						<div class="col-sm-offset-2 col-sm-8">
							<button type="button" class="btn btn-info col-sm-offset-2"
								onclick="checkAndSubmit()">确认信息</button>
							<button onclick="javascript:history.go(-1);"
								class="btn btn-info col-sm-offset-2 ">取消</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$('#orderForm')
				.bootstrapValidator(
						{
							message : 'This value is not valid',
							excluded : [ ':disabled' ],
							feedbackIcons : {
								valid : 'glyphicon glyphicon-ok',
								invalid : 'glyphicon glyphicon-remove',
								validating : 'glyphicon glyphicon-refresh'
							},
							fields : {
								address : {
									message : '',
									validators : {
										notEmpty : {
											message : '地址不能为空'
										},
										stringLength : {
											min : 2,
											max : 50,
											message : '地址最少2个字，最多50字'
										}
									}
								},
								consignee : {
									message : '',
									validators : {
										notEmpty : {
											message : '收件人不能为空'
										},
										stringLength : {
											min : 1,
											max : 20,
											message : '收件人最少1个字，最多20字'
										}
									}
								},
								tel : {
									message : '',
									validators : {
										notEmpty : {
											message : '手机号不能为空'
										},
										regexp : {
											regexp : /^(0|86|17951)?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/,
											message : '请输入国内11位手机号'
										}
									}
								}
							}
						});
		function checkAndSubmit() {
			$("#orderForm").bootstrapValidator('validate');//提交验证  
			if ($("#orderForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码  
				$.ajax({
					url : "order/newOrder.do",
					data : $("#orderForm").serialize(),
					type : "POST",
					success : function(result) {
						//请求成功时
						if (result.msg == 'success') {
							var id = result.orderId;
							$(".modal-body").html("下单成功，点击确定前往支付");
							$("#topModal").modal("show");
							$("#topModal").on('hidden.bs.modal', function() {
								var gotoURL = "order/payOrder.do?id=" + id;
								window.location.href = gotoURL;
							});
						} else if (result.msg == 'error') {
							$(".modal-body").html(result.errorMsg);
							$("#topModal").modal("show");
						}
					},
					error : function() {
						//请求失败时
						$(".modal-body").html("提交订单信息失败");
						$("#topModal").modal("show");
					}

				});
			}
		}
	</script>
</body>
</html>
